@extends('layouts.app')

@section('style')

    <link rel="stylesheet" href="/plugins/datatables/dataTables.bootstrap.css">
    <style>
        .modal-content {border-radius: 6px;}
        th, td {white-space: nowrap;}
    </style>

@endsection

@section('content')

    <div class="content-wrapper">
        <div class="container-fluid">
        <section class="content-header">
            <h1>
                用户管理
                <small>用户详情</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 管理后台</a></li>
                <li><a href="#">用户管理</a></li>
                <li class="active">用户详情</li>
            </ol>
        </section>

        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">用户详情</h3>
                        </div>
                        <div class="box-body">
                            <p class="small">用户活动详情 <a class="btn btn-info btn-xs" href="{{ url('/admin/user') }}">返回用户列表 <i class="glyphicon glyphicon-share-alt"></i></a></p>
                            <table id="user-activity-list" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th width="5%">ID</th>
                                    <th width="10%">活动类型</th>
                                    <th>活动标题</th>
                                    <th>活动背景图片</th>
                                    <th width="10%">受访次数</th>
                                    <th width="10%">开始时间</th>
                                    <th width="10%">结束时间</th>
                                    <th width="10%">创建时间</th>
                                    <th width="5%">操作</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot>
                                <tr>
                                    <th width="5%">ID</th>
                                    <th width="10%">活动类型</th>
                                    <th>活动标题</th>
                                    <th>活动背景图片</th>
                                    <th width="10%">受访次数</th>
                                    <th width="10%">开始时间</th>
                                    <th width="10%">结束时间</th>
                                    <th width="10%">创建时间</th>
                                    <th width="5%">操作</th>
                                </tr>
                                </tfoot>
                            </table>
                            
                            <br />
                            <br />
                            <p class="small">用户调查详情 <a class="btn btn-info btn-xs" href="{{ url('/admin/user') }}">返回用户列表 <i class="glyphicon glyphicon-share-alt"></i></a></p>
                            <table id="user-survey-list" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th width="5%">ID</th>
                                    <th>调查标题</th>
                                    <th>调查说明</th>
                                    <th>调查类型</th>
                                    <th width="10%">受访次数</th>
                                    <th width="10%">开始时间</th>
                                    <th width="10%">结束时间</th>
                                    <th width="10%">创建时间</th>
                                    <th width="5%">操作</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot>
                                <tr>
                                    <th width="5%">ID</th>
                                    <th>活动标题</th>
                                    <th>调查说明</th>
                                    <th>调查类型</th>
                                    <th width="10%">受访次数</th>
                                    <th width="10%">开始时间</th>
                                    <th width="10%">结束时间</th>
                                    <th width="10%">创建时间</th>
                                    <th width="5%">操作</th>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        {{-- 活动，对大屏幕比较有用  v-if="modalShow"  style="display: block;z-index: 2000;" --}}
        <div id="activity" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">{[ panelTitle ]}</h4>
                    </div>
                    <div class="modal-body">
                        <div v-if="type =='screen'" class="row" style="overflow-y: scroll;max-height: 500px;">
                            <div class="col-xs-6 col-md-3" v-for="item of models">
                                <a href="javascript:void(0);" class="thumbnail">
                                    <img v-bind:src="item.image_url" alt="...">
                                </a>
                            </div>
                        </div>

                        <div v-if="type =='game'" class="row" style="overflow-y: scroll;max-height: 500px;">
                            <table class="table table-bordered table-sriped table-hover table-condensed">
                                <tr>
                                    <th>昵称</th>
                                    <th>分数</th>
                                </tr>
                                <tr v-for="item of models">
                                    <td>{[ item.nickname ]}</td>
                                    <td>{[ item.score ]}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        {{-- 调查，投票和问卷 --}}
        <div id="survey" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">{[ panelTitle ]}</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row" style="overflow-y: scroll;max-height: 500px;">
                            <table class="table table-bordered table-sriped table-hover table-condensed">
                                <tr>
                                    <th>选项</th>
                                    <th>次数</th>
                                </tr>
                                <tr v-for="item of models">
                                    <td>{[ item.title ]}</td>
                                    <td>{[ item.counts ]}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div id="ajax-fail" v-if="ajaxFailShow" class="alert alert-warning text-center" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            {[ message ]}
        </div>
        </div>

    </div>



@endsection

@section('javascript')

    <script src="{{ asset('/plugins/jQuery/jquery-2.2.3.min.js') }}"></script>
    <script src="{{ asset('/bootstrap/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('/plugins/datatables/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('/plugins/slimScroll/jquery.slimscroll.min.js') }}"></script>
    <script src="{{ asset('/plugins/fastclick/fastclick.js') }}"></script>
    <script src="{{ asset('/js/app.min.js') }}"></script>
    <script src="{{ asset('/js/vue2.4.0.js') }}"></script>
    <script>
        $(function () {
            var url = '{{ url("/admin/user") }}';

            var activityDt = $('#user-activity-list').DataTable({
                language: {
                    'url': '/plugins/datatables/language/zh-CN.json'
                },
                "lengthChange": false,
                "searching": false,
                "ordering": false,
                "info": true,
                "autoWidth": false,
                "processing": true,
                "serverSide": true,
                "scrollX": true,
                "ajax": "/admin/user/activity/{{$id}}"
            });

            var surveyDt = $('#user-survey-list').DataTable({
                language: {
                    'url': '/plugins/datatables/language/zh-CN.json'
                },
                "lengthChange": false,
                "searching": false,
                "ordering": false,
                "info": true,
                "autoWidth": false,
                "processing": true,
                "serverSide": true,
                "ajax": "/admin/user/survey/{{$id}}"
            });

            $activityVm = new Vue({
                delimiters: ['{[', ']}'],
                el: '#activity',
                data: {
                    modalShow: false,
                    models: [],
                    panelTitle: '',
                    type: ''
                }
            });

            $surveyVm = new Vue({
                delimiters: ['{[', ']}'],
                el: '#survey',
                data: {
                    modalShow: false,
                    models: [],
                    panelTitle: '',
                    type: ''
                }
            });

            $messageVm = new Vue({
                delimiters: ['{[', ']}'],
                el: '#ajax-fail',
                data: {
                    ajaxFailShow: false,
                    message: '暂无数据.'
                }
            });

            activityDt.on( 'draw', function () {
                $('table#user-activity-list a.btn-view').on('click', function(e){
                    var mainType = $(this).data('main-type');
                    var id = $(this).data('id');
                    url2 = url + '/' + mainType + '/one/' + id;
                    var type = $(this).data('type');
                    url2 += '?type=' + type;

                    var panelTitle = '';
                    switch (type) {
                        case 'screen':
                            panelTitle = '大屏幕相册';
                            break;
                        case 'game':
                            panelTitle = '游戏';
                            break;
                        default:
                            panelTitle = '未知类型列表';
                            break;
                    }

                    // console.log(type);
                    // console.log(mainType);
                    $.ajax({
                        url: url2,
                        type: 'GET',
                        success: function (data) {
                            // console.log(data);
                            if (data.errorCode == 0) {
                                $activityVm.modalShow = true;
                                $activityVm.panelTitle = panelTitle;
                                $activityVm.models = data.result;
                                $activityVm.type = type;
                                $('#activity').modal('show');
                            } else {
                                $messageVm.ajaxFailShow = true;
                            }
                        }
                    });
                });
            });
            surveyDt.on( 'draw', function () {
                $('table#user-survey-list a.btn-view').on('click', function(e){
                    var mainType = $(this).data('main-type');
                    var id = $(this).data('id');
                    url2 = url + '/' + mainType + '/one/' + id;
                    var type = $(this).data('type');
                    url2 += '?type=' + type;

                    var panelTitle = '';
                    switch (type) {
                        case 'vote':
                            panelTitle = '调查投票';
                            break;
                        case 'questionnaire':
                            panelTitle = '调查问卷';
                            break;
                        default:
                            panelTitle = '未知类型列表';
                            break;
                    }

                    // console.log(type);
                    // console.log(mainType);
                    $.ajax({
                        url: url2,
                        type: 'GET',
                        success: function (data) {
                            // console.log(data);
                            if (data.errorCode == 0) {
                                $surveyVm.modalShow = true;
                                $surveyVm.type = type;
                                $surveyVm.panelTitle = panelTitle;
                                $surveyVm.models = data.result;
                                $('#survey').modal('show');
                            } else {
                                $messageVm.ajaxFailShow = true;
                            }
                        }
                    });
                });
            });
        });
    </script>

@endsection